/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: legend
*
* date: 2025/7/10
*/
<template>
  <div class="edge_box" style="margin-bottom: 10px">
    <p class="title">边类型</p>
    <div v-for="(item, index) in edgeTypeObj" :key="index" class="legend-item" @click="selectItem(item,index,'edge')"
         :class="{selected:item.selected,unselected:!item.selected}">
      <div class="legend-item-color1" :style="{backgroundColor: item.bgColor}"></div>
      <div class="legend-item-name">{{ item.name || '未知' }}</div>
    </div>
  </div>
  <div class="node_box">
    <p class="title">节点类型</p>
    <div v-for="(item, index) in nodeTypeObj" :key="index" class="legend-item" @click="selectItem(item,index,'node')"
         :class="{selected:item.selected,unselected:!item.selected}">
      <div class="legend-item-color2" :style="{backgroundColor: item.bgColor}"></div>
      <div class="legend-item-name">{{ item.name || '未知' }}</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {edgeTypeColor, nodeTypeColor} from "@/components/graph/config/configuration.js";
import {graphExample} from "@/components/graph/config/main.js";

const emit = defineEmits(['selectItem'])
const props = defineProps({
  elementType: {
    type: Object,
    default: () => {
      return {
        edgeType: [],
        nodeType: []
      }
    }
  }
})
let edgeTypeObj = ref([])
let nodeTypeObj = ref([])

// 监控元素类型
watch(() => props.elementType, (a) => {
  // 设置边类型
  if (a.edgeType.length) {
    edgeTypeObj.value = a.edgeType.map((item, index) => {
      return {
        name: item,
        bgColor: edgeTypeColor[index] || 'black',
        selected: true
      }
    })
  }
  // 设置节点类型
  if (a.nodeType.length) {
    nodeTypeObj.value = a.nodeType.map((item, index) => {
      return {
        name: item,
        bgColor: nodeTypeColor[index] || 'black',
        selected: true
      }
    })
  }
}, {deep: true, immediate: true})

// 点击边类型
function selectItem(item, index, type) {
  let itemNames
  if (type === 'edge') {
    edgeTypeObj.value[index].selected = !edgeTypeObj.value[index].selected
    const data = edgeTypeObj.value.filter(item => item.selected)
    itemNames = data.map(item => item.name)
  } else {
    nodeTypeObj.value[index].selected = !nodeTypeObj.value[index].selected
    const data = nodeTypeObj.value.filter(item => item.selected)
    itemNames = data.map(item => item.name)
  }

  emit('selectItem', itemNames, type)
}

onMounted(() => {
  setTimeout(() => {
    graphExample.on('canvas:click', () => {
      edgeTypeObj.value.forEach(item => {
        item.selected = true
      })
      nodeTypeObj.value.forEach(item => {
        item.selected = true
      })
    })
  }, 1000)
})
</script>

<style scoped lang="less">
.title {
  font-size: 16px;
  font-weight: bolder;
  margin-bottom: 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  height: 24px;
  cursor: pointer;
  padding-left: 14px;

  .legend-item-name {
    font-size: 14px;
  }

  .legend-item-color1 {
    width: 20px;
    height: 4px;
    margin-right: 8px;
  }

  .legend-item-color2 {
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
  }
}

.unselected {
  opacity: 0.1;
}
</style>
